<template>
  <div class="big-screen" :class="{ 'fullscreen': isFullscreen }">
    <!-- 动态背景 -->
    <DynamicBackground ref="dynamicBg" />
    
    <!-- 顶部标题栏 -->
    <div class="screen-header">
      <div class="header-left">
        <div class="company-logo">
          <span class="logo-icon">🏢</span>
          <span class="logo-text">Big-ERP</span>
        </div>
        <div class="screen-title">
          <span class="title-main">企业数据可视化大屏</span>
          <span class="title-sub">Enterprise Data Visualization Dashboard</span>
        </div>
      </div>
      <div class="header-center">
        <div class="current-date">{{ currentDate }}</div>
        <div class="current-time">{{ currentTime }}</div>
      </div>
      <div class="header-right">
        <!-- 背景切换器 -->
        <div class="header-bg-switcher">
          <el-tooltip content="光点呼吸" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'breathing' }" @click="switchBg('breathing')">💫</div>
          </el-tooltip>
          <el-tooltip content="能量场" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'energy' }" @click="switchBg('energy')">🌊</div>
          </el-tooltip>
          <el-tooltip content="数据脉冲" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'pulse' }" @click="switchBg('pulse')">📊</div>
          </el-tooltip>
          <el-tooltip content="微粒漂浮" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'floating' }" @click="switchBg('floating')">✨</div>
          </el-tooltip>
          <el-tooltip content="光晕渐变" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'glow' }" @click="switchBg('glow')">🌟</div>
          </el-tooltip>
          <el-tooltip content="线条流动" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'lines' }" @click="switchBg('lines')">═</div>
          </el-tooltip>
          <el-tooltip content="网格脉冲" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'gridPulse' }" @click="switchBg('gridPulse')">⚡</div>
          </el-tooltip>
          <el-tooltip content="辐射线" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'radial' }" @click="switchBg('radial')">☀️</div>
          </el-tooltip>
          <el-tooltip content="波纹扩散" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'ripple' }" @click="switchBg('ripple')">○</div>
          </el-tooltip>
          <el-tooltip content="氛围光" placement="bottom">
            <div class="bg-btn" :class="{ active: currentBg === 'ambient' }" @click="switchBg('ambient')">🎨</div>
          </el-tooltip>
        </div>
        
        <div class="weather-info">
          <span class="weather-icon">⛅</span>
          <span class="weather-text">25°C 晴</span>
        </div>
        <el-button 
          :icon="isFullscreen ? 'Close' : 'FullScreen'" 
          circle
          @click="toggleFullscreen"
          class="fullscreen-btn"
        />
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="screen-content">
      <!-- 第一行：核心指标卡片 -->
      <div class="screen-row">
        <div class="screen-col col-5">
          <div class="data-panel gradient-primary" @click="animateCard">
            <div class="panel-icon">💰</div>
            <div class="panel-content">
              <div class="panel-label">今日销售额</div>
              <div class="panel-value">
                <span class="value-number">{{ formatNumber(todaySales) }}</span>
                <span class="value-unit">万元</span>
              </div>
              <div class="panel-trend">
                <span class="trend-up">↑ {{ salesGrowth }}%</span>
                <span class="trend-label">较昨日</span>
              </div>
            </div>
            <div class="panel-chart">
              <Gauge :value="75" height="120px" type="progress" />
            </div>
          </div>
        </div>

        <div class="screen-col col-5">
          <div class="data-panel gradient-success">
            <div class="panel-icon">📦</div>
            <div class="panel-content">
              <div class="panel-label">今日订单量</div>
              <div class="panel-value">
                <span class="value-number">{{ todayOrders }}</span>
                <span class="value-unit">单</span>
              </div>
              <div class="panel-trend">
                <span class="trend-up">↑ {{ ordersGrowth }}%</span>
                <span class="trend-label">较昨日</span>
              </div>
            </div>
            <div class="panel-chart">
              <Gauge :value="82" height="120px" type="progress" />
            </div>
          </div>
        </div>

        <div class="screen-col col-5">
          <div class="data-panel gradient-warning">
            <div class="panel-icon">👥</div>
            <div class="panel-content">
              <div class="panel-label">活跃用户</div>
              <div class="panel-value">
                <span class="value-number">{{ activeUsers }}</span>
                <span class="value-unit">人</span>
              </div>
              <div class="panel-trend">
                <span class="trend-up">↑ {{ usersGrowth }}%</span>
                <span class="trend-label">较昨日</span>
              </div>
            </div>
            <div class="panel-chart">
              <Gauge :value="68" height="120px" type="progress" />
            </div>
          </div>
        </div>

        <div class="screen-col col-5">
          <div class="data-panel gradient-danger">
            <div class="panel-icon">📊</div>
            <div class="panel-content">
              <div class="panel-label">访问量</div>
              <div class="panel-value">
                <span class="value-number">{{ formatNumber(pageViews / 10000) }}</span>
                <span class="value-unit">万</span>
              </div>
              <div class="panel-trend">
                <span class="trend-up">↑ {{ viewsGrowth }}%</span>
                <span class="trend-label">较昨日</span>
              </div>
            </div>
            <div class="panel-chart">
              <Gauge :value="91" height="120px" type="progress" />
            </div>
          </div>
        </div>

        <div class="screen-col col-5">
          <div class="data-panel gradient-info">
            <div class="panel-icon">💎</div>
            <div class="panel-content">
              <div class="panel-label">客单价</div>
              <div class="panel-value">
                <span class="value-number">{{ formatNumber(avgOrderValue) }}</span>
                <span class="value-unit">元</span>
              </div>
              <div class="panel-trend">
                <span class="trend-up">↑ {{ avgGrowth }}%</span>
                <span class="trend-label">较昨日</span>
              </div>
            </div>
            <div class="panel-chart">
              <Gauge :value="85" height="120px" type="progress" />
            </div>
          </div>
        </div>
      </div>

      <!-- 第二行：销售分析 -->
      <div class="screen-row">
        <div class="screen-col col-3">
          <div class="chart-panel">
            <div class="panel-header">
              <span class="panel-title">📈 销售趋势分析</span>
              <div class="panel-actions">
                <el-button size="small" text>日</el-button>
                <el-button size="small" text>月</el-button>
                <el-button size="small" text type="primary">年</el-button>
              </div>
            </div>
            <div class="panel-body">
              <Line
                :data="salesTrendData"
                height="320px"
                :show-area="true"
                :colors="['#667eea', '#764ba2']"
              />
            </div>
          </div>
        </div>

        <div class="screen-col col-3">
          <div class="chart-panel">
            <div class="panel-header">
              <span class="panel-title">🎯 产品销售占比</span>
            </div>
            <div class="panel-body">
              <Donut
                :data="productSalesData"
                height="320px"
                :show-legend="true"
                legend-position="bottom"
                :colors="['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']"
              />
            </div>
          </div>
        </div>

        <div class="screen-col col-3">
          <div class="chart-panel">
            <div class="panel-header">
              <span class="panel-title">🏆 销售排行榜</span>
            </div>
            <div class="panel-body">
              <Bar
                :data="topSalesData"
                x-axis-key="name"
                y-axis-key="value"
                height="320px"
                :horizontal="true"
                :colors="['#f5af19', '#f12711']"
                :show-label="true"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 第三行：区域分析与转化漏斗 -->
      <div class="screen-row">
        <div class="screen-col col-2">
          <div class="chart-panel">
            <div class="panel-header">
              <span class="panel-title">🌍 区域销售分布</span>
            </div>
            <div class="panel-body">
              <Map
                :data="regionSalesData"
                height="340px"
                :show-visual-map="true"
              />
            </div>
          </div>
        </div>

        <div class="screen-col col-4">
          <div class="chart-panel">
            <div class="panel-header">
              <span class="panel-title">📊 销售转化漏斗</span>
            </div>
            <div class="panel-body">
              <Funnel
                :data="conversionData"
                height="340px"
                :show-legend="true"
                :colors="['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']"
              />
            </div>
          </div>
        </div>

        <div class="screen-col col-4">
          <div class="chart-panel">
            <div class="panel-header">
              <span class="panel-title">🎨 商品类目对比</span>
            </div>
            <div class="panel-body">
              <Radar
                :data="categoryCompareData"
                :indicators="categoryIndicators"
                height="340px"
                :show-legend="true"
                :colors="['#667eea', '#f093fb', '#4facfe']"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 第四行：热力图与实时数据 -->
      <div class="screen-row">
        <div class="screen-col col-2">
          <div class="chart-panel">
            <div class="panel-header">
              <span class="panel-title">🔥 时段销售热力图</span>
            </div>
            <div class="panel-body">
              <Heatmap
                :data="heatmapData"
                :x-axis-data="hoursData"
                :y-axis-data="daysData"
                height="280px"
                :show-visual-map="true"
              />
            </div>
          </div>
        </div>

        <div class="screen-col col-2">
          <div class="chart-panel">
            <div class="panel-header">
              <span class="panel-title">🔔 实时业务动态</span>
              <div class="pulse-dot"></div>
            </div>
            <div class="panel-body">
              <div class="realtime-scroll">
                <transition-group name="slide-down">
                  <div 
                    v-for="activity in realtimeData" 
                    :key="activity.id"
                    class="activity-item"
                  >
                    <span class="activity-time">{{ activity.time }}</span>
                    <span class="activity-dot" :class="activity.type"></span>
                    <span class="activity-text">{{ activity.content }}</span>
                    <span class="activity-amount" :class="activity.amountClass">{{ activity.amount }}</span>
                  </div>
                </transition-group>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部装饰 -->
    <div class="screen-footer">
      <div class="footer-stats">
        <div class="stat-item">
          <span class="stat-label">系统运行时间</span>
          <span class="stat-value">{{ systemUptime }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">数据更新时间</span>
          <span class="stat-value">{{ lastUpdateTime }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">在线用户</span>
          <span class="stat-value">{{ onlineUsers }}</span>
        </div>
      </div>
      <div class="footer-line"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import Line from '@/components/echarts/Line.vue'
import Bar from '@/components/echarts/Bar.vue'
import Donut from '@/components/echarts/Donut.vue'
import Gauge from '@/components/echarts/Gauge.vue'
import Radar from '@/components/echarts/Radar.vue'
import Map from '@/components/echarts/Map.vue'
import Funnel from '@/components/echarts/Funnel.vue'
import Heatmap from '@/components/echarts/Heatmap.vue'
import DynamicBackground from '@/components/background/DynamicBackground.vue'

const dynamicBg = ref(null)
const currentBg = ref('breathing')
const isFullscreen = ref(false)
const currentDate = ref('')
const currentTime = ref('')
const systemUptime = ref('365天12时35分')
const lastUpdateTime = ref('')
const onlineUsers = ref(1245)

// 核心指标数据
const todaySales = ref(1284.56)
const todayOrders = ref(1256)
const activeUsers = ref(892)
const pageViews = ref(84567)
const avgOrderValue = ref(1022.35)

// 增长率
const salesGrowth = ref(15.8)
const ordersGrowth = ref(12.3)
const usersGrowth = ref(8.6)
const viewsGrowth = ref(21.5)
const avgGrowth = ref(5.2)

// 销售趋势数据
const salesTrendData = computed(() => ({
  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  series: [
    {
      name: '销售额',
      type: 'line',
      smooth: true,
      showSymbol: true,
      data: [820, 932, 901, 934, 1290, 1330, 1420, 1560, 1680, 1820, 1950, 2100],
      areaStyle: { opacity: 0.3 }
    }
  ]
}))

// 产品销售占比
const productSalesData = ref([
  { name: '电子产品', value: 4200 },
  { name: '服装鞋帽', value: 3100 },
  { name: '食品饮料', value: 2800 },
  { name: '家居用品', value: 2400 },
  { name: '其他', value: 1800 }
])

// 销售排行数据
const topSalesData = ref([
  { name: 'iPhone 15 Pro Max', value: 342 },
  { name: 'MacBook Pro 16', value: 298 },
  { name: 'iPad Air', value: 256 },
  { name: 'AirPods Pro 2', value: 189 },
  { name: 'Apple Watch Ultra', value: 145 }
])

// 区域销售数据
const regionSalesData = ref([
  { name: '北京', value: 1580 },
  { name: '上海', value: 2350 },
  { name: '广东', value: 3200 },
  { name: '江苏', value: 2100 },
  { name: '浙江', value: 1890 },
  { name: '山东', value: 1650 },
  { name: '四川', value: 1420 },
  { name: '河南', value: 1280 }
])

// 转化漏斗数据
const conversionData = ref([
  { name: '访问', value: 10000 },
  { name: '浏览商品', value: 6500 },
  { name: '加入购物车', value: 3200 },
  { name: '提交订单', value: 1500 },
  { name: '支付成功', value: 1200 }
])

// 雷达图数据
const categoryIndicators = ref([
  { name: '销量', max: 100 },
  { name: '利润率', max: 100 },
  { name: '客户满意度', max: 100 },
  { name: '复购率', max: 100 },
  { name: '增长率', max: 100 }
])

const categoryCompareData = ref([
  { name: '电子产品', value: [85, 92, 88, 76, 95] },
  { name: '服装鞋帽', value: [78, 85, 92, 88, 82] },
  { name: '食品饮料', value: [92, 75, 95, 90, 78] }
])

// 热力图数据
const hoursData = ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时', '16时', '18时', '20时', '22时']
const daysData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const heatmapData = ref([])

// 生成热力图数据
const generateHeatmapData = () => {
  const data = []
  for (let i = 0; i < daysData.length; i++) {
    for (let j = 0; j < hoursData.length; j++) {
      data.push([j, i, Math.floor(Math.random() * 100)])
    }
  }
  heatmapData.value = data
}

// 实时数据
const realtimeData = ref([
  { id: 1, time: '14:25:32', content: '用户张三完成订单支付', amount: '¥12,999', type: 'success', amountClass: 'amount-success' },
  { id: 2, time: '14:24:18', content: '用户李四下单购买iPhone 15', amount: '¥5,999', type: 'warning', amountClass: 'amount-warning' },
  { id: 3, time: '14:23:45', content: '用户王五完成订单支付', amount: '¥8,999', type: 'success', amountClass: 'amount-success' },
  { id: 4, time: '14:22:30', content: '深圳仓库发货订单#2024010856', amount: '已发货', type: 'info', amountClass: 'amount-info' },
  { id: 5, time: '14:21:15', content: '用户赵六添加购物车', amount: '¥3,299', type: 'primary', amountClass: 'amount-primary' }
])

// 格式化数字
const formatNumber = (num) => {
  return num.toFixed(2)
}

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    weekday: 'long'
  })
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour12: false
  })
  lastUpdateTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
}

// 切换全屏
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

// 卡片动画
const animateCard = (event) => {
  const card = event.currentTarget
  card.style.transform = 'scale(1.05)'
  setTimeout(() => {
    card.style.transform = 'scale(1)'
  }, 200)
}

// 切换背景
const switchBg = (bgType) => {
  currentBg.value = bgType
  if (dynamicBg.value) {
    dynamicBg.value.switchBackground(bgType)
  }
}

let timeInterval = null
let dataInterval = null

onMounted(() => {
  updateTime()
  generateHeatmapData()
  timeInterval = setInterval(updateTime, 1000)
  
  // 模拟实时数据更新
  dataInterval = setInterval(() => {
    const activities = [
      '完成订单支付',
      '下单购买商品',
      '添加购物车',
      '发货订单',
      '确认收货',
      '申请退款',
      '评价商品'
    ]
    const users = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九']
    const types = ['success', 'warning', 'info', 'primary']
    const amountClasses = ['amount-success', 'amount-warning', 'amount-info', 'amount-primary']
    
    const randomUser = users[Math.floor(Math.random() * users.length)]
    const randomActivity = activities[Math.floor(Math.random() * activities.length)]
    const randomType = types[Math.floor(Math.random() * types.length)]
    const randomAmountClass = amountClasses[Math.floor(Math.random() * amountClasses.length)]
    
    const newActivity = {
      id: Date.now(),
      time: new Date().toLocaleTimeString('zh-CN', { hour12: false }),
      content: `用户${randomUser}${randomActivity}`,
      amount: '¥' + (Math.random() * 10000 + 1000).toFixed(2),
      type: randomType,
      amountClass: randomAmountClass
    }
    
    realtimeData.value.unshift(newActivity)
    if (realtimeData.value.length > 8) {
      realtimeData.value.pop()
    }
    
    // 随机更新指标
    todaySales.value += Math.random() * 10
    todayOrders.value += Math.floor(Math.random() * 3)
    activeUsers.value += Math.floor(Math.random() * 5) - 2
    pageViews.value += Math.floor(Math.random() * 100)
  }, 3000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
  if (dataInterval) {
    clearInterval(dataInterval)
  }
})
</script>

<style scoped>
.big-screen {
  width: 100%;
  min-height: 100vh;
  color: #fff;
  padding: 20px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.big-screen.fullscreen {
  padding: 10px;
}

/* 背景层 */

/* 顶部标题栏 */
.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.company-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: bold;
}

.logo-icon {
  font-size: 32px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.logo-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 28px;
  letter-spacing: 1px;
}

.screen-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.title-main {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.title-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}

.header-center {
  text-align: center;
}

.current-date {
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.7;
  color: #e0e0e0;
}

.current-time {
  font-size: 36px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 背景切换器 */
.header-bg-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  backdrop-filter: blur(10px);
}

.bg-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.bg-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(102, 126, 234, 0.5);
  transform: scale(1.1);
}

.bg-btn.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.4));
  border-color: rgba(102, 126, 234, 0.8);
  box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
  transform: scale(1.05);
}

.bg-btn.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #667eea;
  box-shadow: 0 0 8px #667eea;
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-50%) scale(1.5);
  }
}

.weather-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  font-size: 14px;
}

.weather-icon {
  font-size: 20px;
}

.fullscreen-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: #fff !important;
  transition: all 0.3s;
}

.fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.1);
}

/* 内容区 */
.screen-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.screen-row {
  display: flex;
  gap: 20px;
}

.screen-col {
  flex: 1;
}

.col-2 {
  flex: 0 0 calc(50% - 10px);
}

.col-3 {
  flex: 0 0 calc(33.333% - 14px);
}

.col-4 {
  flex: 0 0 calc(25% - 15px);
}

.col-5 {
  flex: 0 0 calc(20% - 16px);
}

.col-6 {
  flex: 0 0 calc(50% - 10px);
}

.col-full {
  flex: 1;
}

/* 数据面板 */
.data-panel {
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: all 0.3s;
  backdrop-filter: blur(20px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

.data-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--panel-color), transparent);
}

.gradient-primary {
  --panel-color: #667eea;
  border-top-color: #667eea;
}

.gradient-success {
  --panel-color: #67c23a;
  border-top-color: #67c23a;
}

.gradient-warning {
  --panel-color: #e6a23c;
  border-top-color: #e6a23c;
}

.gradient-danger {
  --panel-color: #f56c6c;
  border-top-color: #f56c6c;
}

.gradient-info {
  --panel-color: #409eff;
  border-top-color: #409eff;
}

.data-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.06);
}

.panel-icon {
  font-size: 40px;
  opacity: 0.9;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.panel-content {
  flex: 1;
}

.panel-label {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 12px;
  color: #e0e0e0;
}

.panel-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.value-number {
  font-size: 32px;
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.value-unit {
  font-size: 14px;
  opacity: 0.7;
}

.panel-trend {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.trend-up {
  color: #67c23a;
  font-weight: bold;
}

.trend-down {
  color: #f56c6c;
  font-weight: bold;
}

.trend-label {
  opacity: 0.6;
}

.panel-chart {
  margin-top: auto;
  opacity: 0.8;
}

/* 图表面板 */
.chart-panel {
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.chart-panel:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.panel-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.panel-actions {
  display: flex;
  gap: 10px;
}

.panel-body {
  padding: 20px;
}

/* 脉冲点 */
.pulse-dot {
  width: 10px;
  height: 10px;
  background: #67c23a;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* 实时数据流 */
.realtime-scroll {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: all 0.3s;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(5px);
}

.activity-time {
  color: #909399;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  min-width: 70px;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-dot.success {
  background: #67c23a;
  box-shadow: 0 0 10px #67c23a;
}

.activity-dot.warning {
  background: #e6a23c;
  box-shadow: 0 0 10px #e6a23c;
}

.activity-dot.info {
  background: #409eff;
  box-shadow: 0 0 10px #409eff;
}

.activity-dot.primary {
  background: #667eea;
  box-shadow: 0 0 10px #667eea;
}

.activity-text {
  flex: 1;
  color: #e0e0e0;
}

.activity-amount {
  font-weight: bold;
  font-size: 14px;
}

.amount-success {
  color: #67c23a;
}

.amount-warning {
  color: #e6a23c;
}

.amount-info {
  color: #409eff;
}

.amount-primary {
  color: #667eea;
}

/* 过渡动画 */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.5s ease;
}

.slide-down-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.slide-down-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* 底部装饰 */
.screen-footer {
  position: relative;
  margin-top: 30px;
  padding: 20px 0;
  z-index: 1;
}

.footer-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  margin-bottom: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.6;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #667eea;
}

.footer-line {
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #667eea 25%,
    #764ba2 50%,
    #667eea 75%, 
    transparent 100%
  );
  border-radius: 2px;
  animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* 滚动条样式 */
.realtime-scroll::-webkit-scrollbar {
  width: 4px;
}

.realtime-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.realtime-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.realtime-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 响应式 */
@media (max-width: 1600px) {
  .col-5 {
    flex: 0 0 calc(33.333% - 14px);
  }
}

@media (max-width: 1400px) {
  .screen-row {
    flex-wrap: wrap;
  }
  
  .col-2, .col-3, .col-4, .col-5, .col-6 {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .col-2, .col-3, .col-4, .col-5, .col-6 {
    flex: 0 0 100%;
  }
  
  .header-left {
    flex-direction: column;
    gap: 10px;
  }
  
  .title-main {
    font-size: 18px;
  }
  
  .value-number {
    font-size: 24px;
  }
  
  .current-time {
    font-size: 24px;
  }
}
</style>

